<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>门派信息</title>
    <style>
        #container {
            width: 80%;
            margin: 10px auto;
        }
        #container[v-colak]{
            display: none;
        }
        #main dt {
            font-size: 1.5em;
        }
        #main dd {
            font-size: 1.2em;
        }
        #main a {
            text-decoration: none;
            color: blue;
        }
        .nav{
            float: right;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="container" v-colak="" >
        <div class="nav">

                &nbsp;<a href="/polls/logout">注销</a>

                <a href="/polls/login/">请登录</a>

        </div>
        <h1>江湖各大门派信息</h1>
        <hr>
        <div id="main">
            <dl v-for ="subject in subjects">
                <dt>
                    <a   :href="'teachers.html?sno=' + subject.no" >{{ subject.name }}</a>

                    <img v-if="subject.is_hot" src="/static/images/hot.png">
                </dt>
                <dd>
                    {{ subject.infro }}
                </dd>
            </dl>

        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        let app = new Vue({
            el:'#container',
            data:{
                no:'',
                subjects:[]
            },
            created:function(){
                fetch('/polls/subjects/').then(resp => resp.json())
                .then(json => this.subjects = json)
                console.log(this.subjects)
            }
        })



    </script>


</body>
</html>